<!--
 * @Description: 账户管理
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-09-01 10:05:05
-->

<template>
  <div style="height:6vh;padding:10px 20px;background-color: #fff;">
    <span style="line-height:60px;font-size:20px;">账号管理</span>
    <el-button type="primary" style="float:right;margin-top: 10px;"
               @click="beforeAddAccount" >+ 新建账号</el-button>
  </div>

  <!-- 账号搜索卡片 -->
  <div>
  <el-card style="margin: 10px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="用户名" style="width: 270px;">
        <el-input placeholder="请输入用户名" v-model="searchAccountForm.username"
                  @keydown.enter="loadAccount"></el-input>
      </el-form-item>
      <el-form-item label="手机号" style="width: 270px;">
        <el-input placeholder="请输入手机号" v-model="searchAccountForm.phone"
                  @keydown.enter="loadAccount"></el-input>
      </el-form-item>
      <el-form-item label="商家" style="width: 270px;">
        <el-input placeholder="请输入商家名称" v-model="searchAccountForm.businessName"
                  @keydown.enter="loadAccount"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadAccount">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  </div>
  <!-- 账号列表表格 -->
  <el-card style="margin: 10px;">
    <el-table  :data="accountArr" >
      <el-table-column prop="id" label="编号" width="80" align="center"></el-table-column>
      <el-table-column prop="nickname" label="姓名" width="100" align="center"></el-table-column>
      <el-table-column prop="businessId" label="商家" width="80" align="center"></el-table-column>
      <el-table-column prop="accountType" label="用户类型" width="80" align="center"></el-table-column>
      <el-table-column prop="accountPhone" label="手机号" width="200" align="center"></el-table-column>
      <el-table-column prop="email" label="电子邮箱" width="200" align="center"></el-table-column>
<!--      <el-table-column prop="status" label="状态" align="center"></el-table-column>-->
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" >编辑</el-button>
          <el-button type="primary" >删除</el-button>
          <el-button type="primary" >分配角色</el-button>
          <el-button type="primary" >密码重置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 15, 20]"
          v-model:current-page="currentPage"
          v-model:page-size="currentSize"
          v-model:total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </el-card>

  <!-- 新建账号弹窗按钮 -->
    <el-dialog
        :title="dialogTitle"
        v-model="dialogVisible"
        style="width:800px;padding:40px;"
        :before-close="handleClose">

      <el-form label-position="top">
        <div class="radio-group">
          <label>
            <input type="radio" v-model="accountType" value="platform" /> 平台
          </label>
          <label>
            <input type="radio" v-model="accountType" value="merchant" /> 商家
          </label>
        </div>

        <!-- 商家内容-->
        <div class="form-group" v-if="accountType === 'merchant'" style="width:600px">
          <label><span>*</span> 归属商家:</label>
          <el-input placeholder="请输入8~20个字符且包含字母、数字至少一种" v-model="saveAccountForm.businessId">归属商家</el-input>
        </div>

        <!-- 公共部分 -->
        <div class="form-group">
          <label><span>*</span> 手机号码：</label>
              <el-input placeholder="请输入11位手机号" v-model="saveAccountForm.accountPhone" ></el-input>
        </div>

          <div class="form-group">
            <label><span>*</span> 密码：</label>
              <el-input placeholder="请输入8~20个字符且包含字母、数字至少一种" v-model="saveAccountForm.accountPassword"></el-input>
          </div>

          <div class="form-group">
            <label><span>*</span> 用户名：</label>
              <el-input placeholder="请输入15个字符以内的用户名" v-model="saveAccountForm.nickname" ></el-input>
          </div>

          <div class="form-group">
            <label><span>*</span> 电子邮箱：</label>
              <el-input placeholder="请输入电子邮箱" v-model="saveAccountForm.email"></el-input>
              </div>
        <div class="form-group">
          <label><span>*</span> 状态：</label>
          <el-input placeholder="请输入8~20个字符且包含字母、数字至少一种" v-model="saveAccountForm.accountStatus"></el-input>
        </div>
      </el-form>


      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="saveAccount">保存</el-button>
      </template>
    </el-dialog>
</template>

<script setup>
import {onMounted, ref,markRaw} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import {toRaw} from "vue";

const accountType=ref('merchant');


//定义对象用来保存账号搜索的条件
const searchAccountForm = ref({nickname:'',accountPhone:'',email:''})
//定义数组用来保存账号表格数据
const accountArr = ref([]);

//定义加载账号数据的方法
const loadAccount = () => {
  console.log(searchAccountForm.value)
  // let data = qs.stringify(searchAccountForm.value);
  // console.log(data);
  axios.get(BASE_URL + '7070/admin/basic/role/list',searchAccountForm.value)
      .then((response)=>{
    if (response.data.code === '0') {
    accountArr.value = response.data.data;

    } else {
      ElMessage.error(response.data.message);
    }
})
}

//已进入页面立即首次调用加载用户的方法
onMounted(()=>{loadAccount();})
//定义重置搜索的方法
const resetSearch = () => {
  //重置搜索条件
  searchAccountForm.value = {nickname:'',accountPhone:'',email:''};
  //重新加载用户数据
  loadAccount();
}
//定义变量用来控制弹窗是否出现
const dialogVisible = ref(false);
//定义对象用来保存弹窗表单数据
const saveAccountForm = ref({
  id: '',
  nickname: '',
  accountPassword: '',
  businessId: '',
  accountType: '',
  accountPhone: '',
  email: '',
  // account_status: ''
});

//定义保存账号的方法
const saveAccount = ()=>{
  console.log(saveAccountForm.value);
  // let data = qs.stringify(saveAccountForm.value);
  // console.log(data);
  axios.post(BASE_URL+'7070/admin/basic/role/add',saveAccountForm.value)
      .then((response)=>{
        if(response.data.code == 0){
          //点击保存按钮后，保存成功自动关闭弹窗并清空表单数据，弹窗关闭后重新加载用户列表数据
          ElMessage.success('保存成功!');
          dialogVisible.value = false;
          saveAccountForm.value = {};
          loadAccount();//新增成功后需要重新加载用户列表数据!
        }else if (response.data.code === 3001){
          ElMessage.error(response.data.data);
        }else{
          ElMessage.error(response.data.message);
        }
      })
}

//定义处理弹窗关闭的方法
const handleClose = ()=>{
  if(confirm('确认要关闭弹窗吗?')){
    dialogVisible.value = false;//关闭弹窗
    saveAccountForm.value = {};//清空表单数据
  }
}
//定义变量用来保存弹窗标题
const dialogTitle = ref('新建账号');


//定义点击新增账号按钮时调用的方法
const beforeAddAccount = ()=> {
  dialogTitle.value = '新建账号';
  dialogVisible.value = true;
}

</script>

<style scoped>.account-management {
  padding: 20px;
}

.button-group button {
  margin-right: 10px;
  padding: 8px 16px;
}

.button-group button.active {
  background-color: #007bff;
  color: white;
}

.form-container {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-actions button {
  margin-right: 10px;
  padding: 8px 16px;
}
</style>